<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta http-equiv="Content-Script-Type" content="text/javascript">

	<title>UI Dialog - Test Page</title>

	<link rel="stylesheet" href="../../../themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">

	<script type="text/javascript" src="../../../jquery/src/core.js"></script>
	<script type="text/javascript" src="../../../jquery/src/selector.js"></script>
	<script type="text/javascript" src="../../../jquery/src/event.js"></script>
	<script type="text/javascript" src="../../../jquery/src/ajax.js"></script>
	<script type="text/javascript" src="../../../jquery/src/fx.js"></script>
	<script type="text/javascript" src="../../../jquery/src/offset.js"></script>
	<script type="text/javascript" src="../../dimensions/jquery.dimensions.js"></script>
	<script type="text/javascript" src="../ui.dialog.js"></script>
	<script type="text/javascript" src="../ui.mouse.js"></script>
	<script type="text/javascript" src="../ui.resizable.js"></script>
	<script type="text/javascript" src="../ui.draggable.js"></script>
	<script type="text/javascript" src="../ui.shadow.js"></script>
	  
	<style type="text/css" media="screen, projection">

body { font-size: 16px; /* @ EOMB */ }
* html body { font-size: 100%; /* @ IE */ }
body * { font-size: 87.5%; font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif; }
body * * { font-size: 100%; }
h1 { margin: 1em 0 1.5em; font-size: 18px; }
h2 { margin: 2em 0 1.5em; font-size: 16px; }
p { margin: 0; }
pre, pre+p, p+p { margin: 0; }
code { font-family: "Courier New", Courier, monospace; }

.error {
	color: red;
}

	</style>
	<script type="text/javascript">

$(function() {

	var tests = {
		"dialog": {
			"default": {
				"" : "$('#foo').dialog();",
				"clone" : "$('#foo').clone().dialog();",
				"empty" : "$([]).dialog();",
				"detached" : "$('<div/>').dialog();"
			},
			"options": {
				"buttons" : {
					"OkCancel" : "$('#foo').dialog({ width: 650, height: 300,\n\tbuttons: {\n\t\t'Ok': function() {\n\t\t\t$(this).dialogClose();\n\t\t},\n\t\t'Cancel': function() {\n\t\t\t$(this).dialogClose();\n\t\t}\n\t}\n});"
				},
				"draggable" : {
					"true" : "$('#foo').dialog({\n\t draggable: true \n});",
					"false" : "$('#foo').dialog({\n\t draggable: false \n});"
				},
				"height" : {
					"400" : "$('#foo').dialog({\n\t height: 400 \n});",
					"600" : "$('#foo').dialog({\n\t height: 600 \n});"
				},
				"maxHeight" : {
					"40" : "$('#foo').dialog({\n\t maxHeight: 40 \n});",
					"400" : "$('#foo').dialog({\n\t maxHeight: 400 \n});",
					"600" : "$('#foo').dialog({\n\t maxHeight: 600 \n});"
				},
				"minHeight" : {
					"40" : "$('#foo').dialog({\n\tmin Height: 40 \n});",
					"400" : "$('#foo').dialog({\n\tmin Height: 400 \n});",
					"600" : "$('#foo').dialog({\n\tmin Height: 600 \n});"
				},
				"maxWidth" : {
					"40" : "$('#foo').dialog({\n\t maxWidth: 40 \n});",
					"400" : "$('#foo').dialog({\n\t maxWidth: 400 \n});",
					"600" : "$('#foo').dialog({\n\t maxWidth: 600 \n});"
				},
				"minWidth" : {
					"40" : "$('#foo').dialog({\n\t minWidth: 40 \n});",
					"400" : "$('#foo').dialog({\n\t minWidth: 400 \n});",
					"600" : "$('#foo').dialog({\n\t minWidth: 600 \n});"
				},
				"position" : {
					"center" : "$('#foo').dialog({\n\t position: 'center' \n});",
					"top" : "$('#foo').dialog({\n\t position: 'top' \n});",
					"right" : "$('#foo').dialog({\n\t position: 'right' \n});",
					"bottom" : "$('#foo').dialog({\n\t position: 'bottom' \n});",
					"left" : "$('#foo').dialog({\n\t position: 'left' \n});"
				},
				"resizable" : {
					"true" : "$('#foo').dialog({\n\t resizable: true \n});",
					"false" : "$('#foo').dialog({\n\t resizable: false \n});"
				},
				"title" : {
					"attribute" : "$('#foo').attr( 'title', 'Dialog Title' ).dialog();",
					"option" : "$('#foo').dialog({\n\t title: 'Dialog Title' \n});"
				},
				"width" : {
					"400" : "$('#foo').dialog({\n\t width: 400 \n});",
					"600" : "$('#foo').dialog({\n\t width: 600 \n});"
				}
			},
			"callbacks": {
			},
			"methods": {
				"dialogInit" : "$('#foo').dialogInit();\nsetTimeout(\"$('#foo').dialogOpen();\", 1000);",
				"dialogOpen" : "$('#foo').dialog({ width: 450 }).dialogClose();\n setTimeout(\"$('#foo').dialogOpen();\", 1000)",
				"dialogClose" : "$('#foo').dialog({ width: 450 });\n setTimeout(\"$('#foo').dialogClose();\", 1000);"
			}
		}
	};

	
	$('body').append('<div id="blackhole"/>');
	$('#blackhole').css({width: 0, height: 0, overflow: 'hidden'});

	$('body').append('<dl id="tests"/>');

	function deserializeTests( jsObj, dl, path ) {
		$.each( jsObj, function(name, value) {
			if ( typeof value == 'object' ) {
				dl.append('<dt>' + ((name.length) ? name : '[default]') + '</dt>');
				var dd = $( document.createElement( 'dd' ) ).appendTo( dl );
				var newDl = $( document.createElement( 'dl' ) ).appendTo( dd );
				deserializeTests( value, newDl, path + name + '-' );
			} else {
				dl.append('<dt>' + ((name.length) ? path + name : '[default]') + '</dt>');
				var dd = $( document.createElement( 'dd' ) ).appendTo( dl );
				var link = $( document.createElement( 'a' ) ).appendTo( dd );
				link
					.attr( 'href', '#' )
					.text( value )
					.click(function() {
						$( '#foo' ).remove();
						$( '#blackhole' ).append( '<div id="foo"/>' );
						$( '#foo' )
							.html( '<pre><code>' + value + '</code></pre>' )
							.prepend( '<div>' + path + ((name.length) ? name : '[default]') + '</div><hr>' );
						try {
							eval( value );
						} catch ( err ) {
							var errDl = $(document.createElement('dl')).insertAfter(link);
							$.each(err, function(name, value) {
								errDl.append('<dt>' + name + '</dt>');
								errDl.append('<dd><pre><code>' + value + '</code></pre></dd>');
							});
							link.after('<div class="error">' + err + '</div>');
						} finally {
							return false;
						}
					});
			}
		});
	}
	deserializeTests(tests, $('#tests'), "");

});
	</script>

</head>
<body class="flora">

</body>
</html>
